<template>
  <div class="search">
    <div class="top">
      <router-link
        class="icon-xiangzuojiantou iconfont"
        to="/find"
      ></router-link>
      <van-search
        v-model="searchValue"
        class="search-box"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        shape="round"
        clearable
        autofocus
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="content" v-if="songList.length > 0">
      <div class="title">
        <div>单曲</div>
        <div>播放全部</div>
      </div>
      <div class="list">
        <div class="item" v-for="item in songList" @click="play(item)" :key="item.id">
          <div class="left">
            <div class="song-name">{{ item.name }}</div>
            <div class="bottom">
              <div v-for="ar in item.ar" :key="ar.id">{{ ar.name }}</div>
              <div class="p5">-</div>
              <div>{{ item.al.name }}</div>
            </div>
          </div>
          <div class="right">
            <span class="iconfont icon-Androidgengduo_o"></span>
          </div>
        </div>
      </div>
    </div>
    {{ autofocus }}
  </div>
  <AudioPlay></AudioPlay>
</template>


<script setup>
import { onMounted, ref } from "vue";
import request from "../../utils/Request.js";
import methods from "../../utils/methods.js";
import AudioPlay from "../../components/AudioPlay.vue";
import store from "../../store/index.js";

const searchValue = ref(""); // 搜索值
const defaultSearchKeyword = ref(); // 搜索关键词
const hotSearchDetail = ref(); // 热搜列表
const searchSuggest = ref(""); // 搜索建议
const songList = ref([]); // 搜索的歌曲列表
// 搜索方法  定义搜索接口  cloudsearch 更全         search 1
const onSearch = async () => {
  let result = await request(`/cloudsearch?keywords=${searchValue.value}`);
  if (result.code === 200) {
    songList.value = result.result.songs;
  }
};

// 默认搜索关键词
const getDefaultSearchKeyword = async () => {
  let result = await request(`/search/default`);
  if (result.code === 200) {
    console.log(result);
  }
};
// 热搜列表(详细) /search/hot/detail
const getHotSearchDetail = async () => {
  let result = await request(`/search/hot/detail`);
  if (result.code === 200) {
    console.log(result);
  }
};
// 搜索建议
const getSearchSuggest = async () => {
  let result = await request(
    `/search/suggest?keywords=${searchValue}&type=mobile`
  );
  if (result.code === 200) {
    console.log(result);
  }
};
const play = (item) => {
  methods.play(item);
  // 刷新歌单列表
  store.commit("setSongList", songList.value);
};
// 自动对焦
// const autofocus  = ref(true)
onMounted(() => {
  let contain = document.querySelector(".audio-play-container");
  contain.style.bottom = "0";
});
</script>


<style scoped lang="scss">
.search {
  padding: 0 15px 20px;
  background: #f9f9f9;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .van-search {
    padding: 0;
    background: #f9f9f9;
  }

  :deep(.van-search__content) {
    background: #fff;
    border-radius: 20px;
    color: #000;
  }

  :deep(.van-search__action) {
    background: #f9f9f9 !important;
  }

  .top {
    display: flex;
    align-items: center;
    padding: 10px;

    .search-box {
      flex: 1;
    }

    .iconfont {
      padding-right: 10px;
    }
  }

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 15px 38px;
    border-radius: 20px;
    background: #fff;
    height: 100px;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;
    }

    .list {
      flex: 1;
      overflow-y: scroll;

      .item {
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          .song-name {
            font-size: 14px;
            margin-bottom: 2px;
          }

          .bottom {
            color: #777;
            font-size: 12px;
            display: flex;
          }
        }

        // .right {
        // }
      }
    }
  }
}
</style>
